<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习3/5_表格</title>
		<link rel="stylesheet" href="./css/practice_table3_5.css">
	</head>
	<body>
		<!-- 179000516 王德令 -->
		<div class="box">
			<div class="info">
				<p class="main">开始
					<span class="user">					
					<img src="./images/user.jpg" />
					</span>
					<select id="mysel">
						<option value="images/bg1.jpg">bg1.jpg</option>
						<option value="images/bg2.jpg">bg2.jpg</option>
						<option value="images/bg3.jpg">bg3.jpg</option>
					</select>
				</p>
				
			</div>
			<div class="t1">
				<!-- 表格1 -->
				<table id="table1">
					<tr>
						<td><img src="images/tab1.jpg" alt=""></td>
						<td><img src="images/tab2.jpg" alt=""></td>
						<td colspan="2"><img src="images/btab1.jpg" alt=""></td>
					</tr>
					<tr>
						<td><img src="images/tab4.jpg" alt=""></td>
						<td><img src="images/tab3.jpg" alt=""></td>
						<td colspan="2"><img src="images/btab2.jpg" alt=""></td>
					</tr>
					<tr>
						<td><img src="images/tab5.jpg" alt=""></td>
						<td><img src="images/tab6.jpg" alt=""></td>
						<td colspan="2"><img src="images/btab3.jpg" alt=""></td>
					</tr>
					<tr>
						<td><img src="images/tab8.jpg" alt=""></td>
						<td><img src="images/tab7.jpg" alt=""></td>
						<td colspan="2"><img src="images/btab4.jpg" alt=""></td>
					</tr>
					<tr>
						<td colspan="2"><img src="images/btab5.jpg" alt=""></td>
						<td><img src="images/tab9.jpg" alt=""></td>
						<td><img src="images/tab10.jpg" alt=""></td>
					</tr>
				</table>
			</div>
			<div class="t2">
				<!-- 表格2 -->
				<table id="table2">
					<tr>
						<td colspan="2"><img src="images/btab6.jpg" alt=""></td>
						<td><img src="images/tab11.jpg" alt=""></td>
						<td><img src="images/tab12.jpg" alt=""></td>
						<td><img src="images/tab13.jpg" alt=""></td>
					</tr>
					<tr>
						<td><img src="images/tab14.jpg" alt=""></td>
						<td><img src="images/tab15.jpg" alt=""></td>
						<td colspan="2"><img src="imgages/btab7.jpg" alt=""></td>
					</tr>
					<tr>
						<td><img src="images/tab16.jpg" alt=""></td>
						<td><img src="images/tab17.jpg" alt=""></td>
						<td><img src="images/tab18.jpg" alt=""></td>
						<td><img src="images/tab19.jpg" alt=""></td>
					</tr>
					<tr>
						<td colspan="2"><img src="images/btab8.jpg" alt=""></td>
						<td colspan="2"><img src="images/btab9.jpg" alt=""></td>
					</tr>
					<tr>
						<td><img src="images/tab20.jpg" alt=""></td>
						<td><img src="images/tab21.jpg" alt=""></td>
						<td><img src="images/tab22.jpg" alt=""></td>
						<td><img src="images/tab23.jpg" alt=""></td>
					</tr>
				</table>
			</div>
		</div>
		
	</body>
	<script>
		//注册事件，获取要改变的背景图片资源
		// var mysel = document.querySelector("#mysel");
		// mysel.addEventListener("change",function(){
		// 	// console.log(this.selectedIndex);
		// 	// console.log(this.options[this.selectedIndex].text,this.options[this.selectedIndex].value);
		// 	var index = this.selectedIndex;
		// 	var opt = this.options[index];
		// 	// var imgsrc = opt.value;
		// 	// console.log(imgsrc);
		// 	var imgsrc = opt.value;
		// 	console.log(imgsrc);
		// });
		
		// //使用DOM改变背景
		// var mybody = document.body;
		// mybody.style.backgroundImage = "url(" + imgsrc + ")";
		
		//versions2.0
		//
		var mysel = document.createElement("select");
		for(let i = 1;i <= 3;i ++){
			var opt = document.createElement("option");
			opt.text = "bg1.jpg";
			opt.value = "images/bg1.jpg";
			mysel.appendChild(opt);
		}
		
		var table1 = document.querySelectorAll("table")[0];
		var mytd = table1.childNodes[1].firstChild.childNodes[1];
		mytd.appendChild(mysel);
		
	</script>
</html>
